import { PlusOutlined } from '@ant-design/icons';
import {
    Form,
    Input,
    Radio,
    Select,
    Upload,
    Button,
} from 'antd';
import { useCallback, useEffect, useState ,forwardRef } from 'react';
import { fileToUrl } from '../../../../utils/index'
const FormHeader = (props) => {
    const [form] = Form.useForm();
    const { TextArea } = Input;
    
    const onFinish = useCallback(values => {
        const data = {
            ...values,
            imgPath:fileToUrl(values.imgPath.file),
            key:Date.now(),
        }
        props.setDataList(pre => [data,...pre])
        form.resetFields();
    }, [props])


    const beforeUpload = useCallback((file) => {
        return false
    }, [])
    return (
        <>
            <Form
                labelCol={{
                    span: 8,
                }}
                wrapperCol={{
                    span: 16,
                }}
                layout="horizontal"
                onFinish={onFinish}
                form={form}
                style={{
                    display: 'flex',
                    justifyContent: 'space-around',
                    flexWrap: 'wrap',
                    alignItems: 'center',
                    minHeight: '80',
                    borderBottom: '1px solid #e8e8e8',
                }}
            >
                 <Form.Item label="姓名" name='name'>
                    <Input />
                </Form.Item>
                <Form.Item label="性别" name='sex'>
                    <Radio.Group style={{ display: 'flex' }}>
                        <Radio value="1"> 男 </Radio>
                        <Radio value="0"> 女 </Radio>
                    </Radio.Group>
                </Form.Item>
                <Form.Item label="评论类型" name='type' style={{ minWidth: 300 }} labelCol={{ span: 6 }} >
                    <Select>
                        <Select.Option value="rmtr">辱骂他人</Select.Option>
                    </Select>
                </Form.Item>
                <Form.Item label="上传截图" valuePropName='imgPath' name='imgPath' style={{ minWidth: 200, display: 'flex', alignItems: 'center', marginTop: '8px' }} >
                    <Upload listType="picture-card" beforeUpload={beforeUpload}>
                        <div>
                            <PlusOutlined />
                            <div
                                style={{
                                    marginTop: 8,
                                }}
                            >
                                Upload
                            </div>
                        </div>
                    </Upload>
                </Form.Item>
                <Form.Item label="详情" name='content' style={{ minWidth: 200, display: 'flex', alignItems: 'center', marginTop: '8px' }}>
                    <TextArea rows={4} />
                </Form.Item>
                <Form.Item>
                    <Button type='primary' htmlType='submit'>Submit</Button>
                </Form.Item>
            </Form>
        </>
    );
};
export default FormHeader;